<template>
	<view class="zb-detail-box">
		<view class="zb-detail-info">
			<!-- 交易金额 -->
			<view class="zb-detail-info-top">
				<text style="color: #333;font-size: 68rpx;margin-bottom: 30rpx;">¥{{money}}</text>
				<text style="font-size: 24rpx;" :style="statusStyle">{{statusName}}</text>
				<view class="qgd-view" @tap="showQgdAction" v-if="props.txnStatus == '1'">
					<text>查看签购单</text>
					<image class="ggd-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="zb-detail-info-line"></view>
			<!-- 交易账单信息 -->
			<view class="zb-detail-info-bottom">
				<!-- 收入详情信息 -->
				<view v-if="title == '收入详情'">
					<view class="zb-detail-info-bottom-item">
						<text>交易时间</text>
						<text>{{time}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>交易方式</text>
						<text>{{typeName}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>交易金额</text>
						<text>¥{{money}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>手续费</text>
						<text>{{$u.test.isEmpty(props.txnFee) ? '结算中' : `¥${props.txnFee}`}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>结算周期</text>
						<text>{{props.settleType || '结算中'}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>交易银行</text>
						<text>{{props.bankName}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>交易卡号</text>
						<text>{{bankCardNo}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<view class="zb-detail-info-bottom-item-left">
							<text>交易流水号</text>
							<view class="zb-detail-info-bottom-item-copy" @tap="copyAction(props.thirdSeqNo)">复制</view>
						</view>
						<text>{{props.thirdSeqNo}}</text>
					</view>
				</view>
				<!-- 结算详情信息 -->
				<view v-else>
					<view class="zb-detail-info-bottom-item">
						<text>结算时间</text>
						<text>{{time}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>结算金额</text>
						<text>¥{{money}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>结算周期</text>
						<text>{{props.settleType || ''}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>结算银行</text>
						<text>{{props.bankName}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<text>结算卡号</text>
						<text>{{bankCardNo}}</text>
					</view>
					<view class="zb-detail-info-bottom-item">
						<view class="zb-detail-info-bottom-item-left">
							<text>结算单号</text>
							<view class="zb-detail-info-bottom-item-copy" @tap="copyAction(props.thirdSeqNo)">复制</view>
						</view>
						<text>{{props.thirdSeqNo}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zb-detail-tel">
			<text>订单有疑问？</text>
			<text style="color: #2C8DF4;" @tap="callAction">点击联系客服</text>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref ,computed} from 'vue'
	import { CUSTOMSERVICE_TEL } from '@/config/config.js'
	const props = defineProps()
	const title = ref('收入详情')
	title.value = uni.$u.test.isEmpty(props.settleOrderNo) ? '收入详情' : '结算详情'
	onLoad(()=>{
		uni.setNavigationBarTitle({
			title:title.value
		})
	})
	const statusStyle = computed(()=>{
		if(uni.$u.test.isEmpty(props.settleOrderNo)){
			//交易订单
			if(props.txnStatus == '1'){
				return {color:'#008000'}
			}
			else if(props.txnStatus == '4'){
				return {color:'#1890FF'}
			}
			else{
				return {color:'#FF0203'}
			}
		}
		else{
			//结算订单
			if(props.settleStatus == '1'){
				return {color:'#1890FF'}
			}
			else if(props.settleStatus == '2'){
				return {color:'#008000'}
			}
			else{
				return {color:'#FF0203'}
			}
		}
	})
	//状态
	const statusName = computed(()=>{
		if(uni.$u.test.isEmpty(props.settleOrderNo)){
			//交易订单
			if(props.txnStatus == '1'){
				return '交易成功'
			}
			else if(props.txnStatus == '4'){
				return '处理中'
			}
			else{
				return '交易失败'
			}
		}
		else{
			//结算订单
			if(props.settleStatus == '1'){
				return '结算中'
			}
			else if(props.settleStatus == '2'){
				return '已结算'
			}
			else{
				return '结算失败'
			}
		}
	})
	//时间
	const time = computed(()=>{
		if(uni.$u.test.isEmpty(props.settleOrderNo)){
			//交易订单
			return props.txnTime
		}
		else{
			//结算订单
			if(!uni.$u.test.isEmpty(props.settleDate)){
				return props.settleDate.slice(0,10)
			}
			return props.settleDate
		}
	})
	//交易/结算金额
	const money = computed(()=>{
		if(uni.$u.test.isEmpty(props.settleOrderNo)){
			//交易订单
			return props.txnAmount
		}
		else{
			//结算订单
			return props.settleTxnAmt
		}
	})
	//交易类型
	const typeName = computed(()=>{
		if(props.txnType == '00'){
			return '刷卡'
		}
		else if(props.txnType == '01'){
			return '扫码'
		}
		return ''
	})
	//格式化后的银行卡号
	const bankCardNo = computed(()=>{
		return uni.$tools.formatBankCardNo(props.txnBankCard)
	})
	//复制
	const copyAction = (value)=>{
		uni.$tools.copy(value)
	}
	//查看签购单
	const showQgdAction = ()=>{
		uni.$u.route({
			url:'/pages/account-book/sales-slip',
			params:props
		})
	}
	//点击联系客服
	const callAction = ()=>{
		uni.makePhoneCall({
			phoneNumber:CUSTOMSERVICE_TEL
		})
	}
</script>

<style lang="scss" scoped>
	.zb-detail-info {
		margin: 30rpx;
		background-color: white;
		border-radius: 16rpx;
		overflow: hidden;

		.zb-detail-info-top {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 90rpx 30rpx;
			position: relative;
			.qgd-view{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				font-size: 24rpx;
				color: $xh-theme-color;
				.ggd-icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.zb-detail-info-line {
			background-color: $xh-line-color;
			height: 1px;
			transform: translateY(0.5);
		}

		.zb-detail-info-bottom {
			padding: 30rpx 30rpx;
			color: xh-title-color;
			font-size: 24rpx;

			.zb-detail-info-bottom-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.zb-detail-info-bottom-item-left {
					display: flex;
					align-items: center;

					.zb-detail-info-bottom-item-copy {
						margin-left: 12rpx;
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						padding: 0 20rpx;
						font-size: 20rpx;
						color: #606266;
						background-color: #e6e6e6;
					}
				}
			}
		}
	}
	.zb-detail-tel {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		color: $xh-title-color;
		font-size: 24rpx;
	}
</style>